<template>
  <div>
    <van-nav-bar title="网易严选" size="19px">
      <template #right>
        <van-icon name="search" size="25" color="black" />
        <van-icon name="shopping-cart-o" size="25" color="black" />

      </template>
      <template #left>
        <van-icon name="home-o" size="25" @click="fun()" color="black" />
      </template>
    </van-nav-bar>
    <div class="one">

      <van-tabs v-model="active" swipeable @click="onClick" sticky animated>
        <van-tab v-for="(v, index) in obj" :title="v" :key="index">
        </van-tab>
      </van-tabs>
    </div>
    <div class="first">
      <div class="two" v-for="(v, index) in obj1" :key="index" @click="mydetails(v.proid)">
        <div class="top">
          <div class="left"><img :src="v.img1" alt=""></div>
          <div class="right">
            <div class="smtop">{{ v.category }}</div>
            <div class="smbottom">
              <span style=" float: left; font-weight: bold; font-size: 20px; color: red;">￥</span>
              <p
                style=" line-height: 30px; text-align: center; float: left; display: block; width: 30px; height: 30px; font-weight: bold; font-size: 18px; color: red;">
                {{ v.originprice }}</p>
              <div class="three" @click="save(v.proid)">
                马上抢
                <van-icon name="arrow" />

              </div>
            </div>
          </div>
        </div>
        <div class="bottom">{{ v.brand }}</div>

      </div>

    </div>


  </div>
</template>

<script>
import { ref } from 'vue';
import axios from "axios"
let service = axios.create()

export default {
  data() {
    return {
      active: 0,
      obj: [],
      txt: '显卡',
      obj1: []


    }
  },
  methods: {

    onClick(v, v1) {
      this.obj1 = []
      service({
        url: 'http://118.178.238.19:3001/api/pro/search',
        method: 'get',
        params: {
          keyword: v1,
          limitNum: 20
        }
      }).then(res => {
        if (res.data.data != undefined) {
          res.data.data.forEach(element => {
            this.obj1.push(element)
          });
        }
      })
    },
    fun1() {
      this.$router.push('/homepage')
    },
    mydetails(v) {
      this.$router.push({ path: '/details', query: { id: v } })
    },
    fun() {
      this.$router.go(-1)
    }
  }
  ,
  mounted() {
    service({
      url: 'http://118.178.238.19:3001/api/pro/categorylist',
      method: 'get',
    }).then(res => {
      this.obj = res.data.data
    }),
      service({
        url: 'http://118.178.238.19:3001/api/pro/search',
        method: 'get',
        params: {
          keyword: this.txt,
          limitNum: 20
        }
      }).then(res => {
        res.data.data.forEach(element => {
          this.obj1.push(element)
        });

      })
  }

};

</script>

<style  scoped>
body {
  background-color: #eee;
}

.van-nav-bar__right {
  display: flex;
  justify-content: space-around;
  width: 6.25rem;
}

.one {
  width: 100%;
  /* height: 20000px; */
  /* height: 31.25rem; */
  height: 16.5rem;
  background: url(../../../assets/23ebcca65dfb159564fbee8aaacff6e4.webp) center /100% 100% no-repeat;
  position: relative;
  /* overflow: hidden; */
}

.van-tabs {
  position: absolute;
  top: 9.375rem;
  width: 100%;
}

.two {
  width: 95%;
  margin: auto;
  /* margin-top:12.5rem; */
  height: 10.4375rem;
  /* background-color: red; */
  background-color: #fff;
  border-radius: 5px 5px;
  /* position: absolute; */
  /* z-index: 9999; */
  /* top: 220px; */
}

.first {
  width: 100%;
  height: auto;
  position: absolute;
  top: 15.625rem;
}

.top {
  width: 98%;
  height: 7.5rem;
  /* background-color: aqua; */
  margin: auto;
  margin-top: .25rem;
}

.bottom {
  width: 98%;
  height: 2.5rem;
  background-color: aliceblue;
  margin: auto;
  margin-top: .25rem;
  text-align: center;
  line-height: 2.5rem;

}

.left {
  width: 7.5rem;
  height: 7.5rem;
  /* background-color: blueviolet; */
  float: left;
}

.right {
  width: calc(98% - 7.5rem);
  height: 7.5rem;
  /* background-color: brown; */
  float: right;
  position: relative;
}

.smtop {
  width: 90%;
  height: 2.625rem;
  /* background-color: cadetblue; */
  font-size: .75rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 1.25rem;
}

.smbottom {
  width: 90%;
  height: 1.5rem;
  /* background-color: coral; */
  position: absolute;
  bottom: .3125rem;
  font-size: .75rem;
}

.left img {
  width: 100%;
  height: 100%;
}

.three {
  float: right;
  width: 3.75rem;
  height: 1.25rem;
  border-radius: 10px;
  background-color: red;
  color: white;
  font-weight: bold;
  text-align: center;
}
</style>